<template>
	<view class="profile-box">
		<view class="user-info">
			<uv-avatar src="/图片素材/my/avator.png" size="112rpx"></uv-avatar>
			<view class="mid-text">
				<view class="text-top">
					<text>用户未完善</text>
					<uv-icon name="arrow-right" bold color="#000" size="10"></uv-icon>
				</view>
				<view class="text-bottom">
					<view class="context">常用就诊人(<text>0</text>)</view>
					<view class="number-account">数字账户</view>
				</view>
				<view class="icon-btns">
					<uv-icon name="setting" color="#000" size="24"></uv-icon>
					<view class="message">
						<uv-icon name="chat" color="#000" size="28"></uv-icon>
						<text class="dot">2</text>
					</view>
				</view>
			</view>
		</view>
		<view class="user-order">
			<view class="inside-box">
				<view class="records-title">
					<text class="title">我的订单</text>
					<view class="icon-title">
						<text>评价中心</text>
						<uv-icon name="arrow-right" size="13" color="#000"></uv-icon>
					</view>
				</view>
				<view class="grid-icons">
					<uv-grid :border="false" :col="4">
						<uv-grid-item v-for="(item,index) in navBox" :key="item._id">
							<image :src="item.image" mode=""></image>
							<text class="grid-text">{{item.text}}</text>
						</uv-grid-item>
					</uv-grid>
				</view>
				<view class="coin-coupon">
					<view class="coin" style="margin-right: 40rpx;">
						<view class="left">
							<image src="/图片素材/my/myicon/quan.png" mode=""></image>
							<text>健康币</text>
						</view>
						<view class="right">
							<text>0</text>
							<uv-icon name="arrow-right" size="13" color="#000"></uv-icon>
						</view>
						<view class="go-check">
							<text>去签到+10</text>
						</view>
					</view>
					<view class="coin">
						<view class="coin" style="margin-left: 40rpx;">
							<view class="left">
								<image src="/图片素材/my/myicon/coin.png" mode=""></image>
								<text>优惠卷</text>
							</view>
							<view class="right">
								<text>8</text>
								<uv-icon name="arrow-right" size="13" color="#000"></uv-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="user-registe">
			<image src="/图片素材/my/myicon/registe.png" mode=""></image>
			<text>我的挂号</text>
			<uv-icon bold class="arrow-right" name="arrow-right" size="12" color="#000"></uv-icon>
		</view>
		<view class="healthy-vip">
			<view class="kaitong">
				<text>健康VIP会员</text>
				<view class="button">
					<text>立即开通</text>
				</view>
			</view>
			<view class="quanyi">
				<text class="text1">开通即享专家号源实时提醒等</text>
				<text class="text2">8大权益</text>
				<uv-icon bold class="arrow-right" name="arrow-right" size="12" color="#AF7107"></uv-icon>
			</view>
		</view>
		<view class="vip-doc">
			<view class="doc">
				<image src="/图片素材/my/myicon/doc.png" mode=""></image>
				<view class="text">
					<text class="title">我的医生</text>
					<text class="desc">一键在线复诊</text>
				</view>
			</view>
			<view class="vip">
				<image src="/图片素材/my/myicon/vip.png" mode=""></image>
				<view class="text">
					<text class="title">会员中心</text>
					<text class="desc">精选权益超值享</text>
				</view>
			</view>
		</view>
		<view class="good-thing">
			<view class="records-title">
				<text class="title">健康好物</text>
				<view class="icon-title">
					<text>更多</text>
					<uv-icon class="arrow-right" name="arrow-right" size="10" color="#000"></uv-icon>
				</view>
			</view>
		</view>
		<view class="service-tools">
			<view class="records-title" style="margin-bottom: 0;">
				<text class="title">服务与工具</text>
			</view>
			<uv-grid :border="false" :col="4" class="service-grid">
				<uv-grid-item :customStyle="{width:25+'%',height:150+'rpx'}"  v-for="(item,index) in toolsList" :key="index">
					<image :src="item.name" mode=""></image>
					<text class="grid-text">{{item.title}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
	
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'
import { getIconsFn } from '../../api/health'
const navBox = ref([])
	const toolsList = ref([{name:'/图片素材/my/tools/start.png',title: '收藏'},{name:'/图片素材/my/tools/doc.png',title: '我的医生'},{name:'/图片素材/my/tools/shop.png',title: '健康商城'},{name:'/图片素材/my/tools/gongneng.png',title: '功能介绍'},{name:'/图片素材/my/tools/plan.png',title: '随访计划'},{name:'/图片素材/my/tools/kefu.png',title: '客服中心'},{name:'/图片素材/my/tools/fapiao.png',title: '我的发票'},{name:'/图片素材/my/tools/love.png',title: '长辈模式'},{name:'/图片素材/my/tools/huaxiang.png',title: '健康画像'},{name:'/图片素材/my/tools/hezuo.png',title: '合作入住'},{name:'/图片素材/my/tools/qun.png',title: '医患社群'},{name:'/图片素材/my/tools/diaoyan.png',title: '用户调研'}])
onMounted(()=>{
	getIconsFn("myicon").then(res=>{
		navBox.value = res.data.data
	})
})
onLoad(()=>{
	uni.showTabBarRedDot({
		index: 3
	})
})
</script>

<style scoped lang="scss">
	.records-title{
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		.title{
			font-weight: bold;
			font-size: 34rpx;
		}
		.icon-title{
			display: flex;
			align-items: end;
			text{
				font-size: 28rpx;
				color: #000;
			}
		}
	}
	.profile-box{
		padding: 32rpx;
		background-image: linear-gradient(180deg,#f2f6ff 2%,#f5f5f5 20%,#f4f5f7);
		.user-info{
			margin-top: 88rpx;
			display: flex;
			color: #15161c;
			position: relative;
			margin-bottom: 50rpx;
			.mid-text{
				margin-left: 20rpx;
				.text-top{
					display: flex;
					padding: 4rpx 0;
					margin-bottom: 18rpx;
					text{
						margin-right: 6rpx;
					}
				}
				.text-bottom{
					display: flex;
					font-size: 24rpx;
					gap: 16rpx;
					.context{
						border: 1px solid #15161c;
						border-radius: 40rpx;
						padding: 8rpx 20rpx;
						line-height: 1;
					}
					.number-account{
						border: 1px solid #15161c;
						border-radius: 40rpx;
						padding: 8rpx 20rpx;
						line-height: 1;
					}
				}
				.icon-btns{
					position: absolute;
					right: 0;
					top: 0;
					display: flex;
					align-items: center;
					gap: 16rpx;
					.message{
						width: 56rpx;
						height: 56rpx;
						position: relative;
						.uv-icon{
							transform: translate(0, -6rpx);
						}
						.dot{
							display: inline-block;
							position: absolute;
							right: 0;
							top: -7rpx;
							width: 24rpx;
							height: 24rpx;
							background-color: red;
							border-radius: 50%;
							text-align: center;
							line-height: 20rpx;
							font-size: 15rpx;
							color: white;
						}
					}
				}
			}
		}
		// 订单
		.user-order{
			height: 356rpx;
			border-radius: 20rpx;
			overflow: hidden;
			background-color: #fff;
			box-shadow: 1px 1px 1px #fff;
			border: 1px solid #fff;
			margin-bottom: 24rpx;
			.inside-box{
				width: 100%;
				height: 310rpx;
				background: linear-gradient(180deg, #f2f7ff,#f9fbff,#ffffff);
				padding: 10rpx 16rpx;
				
				.grid-icons{
					image{
						width: 66rpx;
						height: 66rpx;
					}
					.grid-text{
						color: #2b313d;
						font-size: 28rpx;
					}
				}
				.coin-coupon{
					height: 96rpx;
					padding: 0 20rpx;
					margin-top: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.coin{
						display: flex;
						align-items: center;
						color: #15161c;
						width: 306rpx;
						height: 100%;
						position: relative;
						font-size: 28rpx;
						.left{
							display: flex;
							align-items: center;
							line-height: 1;
							image{
								width: 40rpx;
								height: 40rpx;
								margin-right: 16rpx;
							}
							text{
								font-size: 28rpx;
							}
						}
						.right{
							display: flex;
							align-items: baseline;
							margin-left: 50rpx;
							text{
								margin-right: 16rpx;
							}
						}
						.go-check{
							position: absolute;
							top: -14rpx;
							left: 18rpx;
							font-size: 24rpx;
							color: #fff;
							width: 154rpx;
							height: 46rpx;
							background-color: #ff4d40;
							border-radius: 10rpx;
							border-bottom-left-radius: 23rpx;
							border-bottom-right-radius: 23rpx;
							clip-path: polygon(0 0,154rpx 0, 154rpx 40rpx, 83rpx 40rpx, 77rpx 46rpx, 71rpx 40rpx, 0 40rpx);
							display: flex;
							justify-content: center;
							align-items: self-start;
						}
					}
				}
			}
		}
		
		// 预约
		.user-registe{
			width: 100%;
			height: 120rpx;
			background-image: linear-gradient(180deg,#f2f6ff,#fff);
			border: 1px solid #fff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 24rpx;
			padding: 20rpx;
			image{
				width: 76rpx;
				height: 76rpx;
				margin-right: 10rpx;
			}
			text{
				font-weight: bold;
				
			}
			.arrow-right{
				position: absolute;
				right: 20rpx;
			}
		}
	
		// vip
		.healthy-vip{
			width: 100%;
			height: 162rpx;
			margin-bottom: 24rpx;
			border: 1px solid #fff;
			border-radius: 20rpx;
			font-size: 32rpx;
			color: #6F4905;
			background: linear-gradient(180deg, rgba(255, 249, 239, 1) 0%, rgba(254, 241, 224, 1) 55%, rgba(255, 255, 255, 1) 115%);
			padding: 32rpx;
			.kaitong{
				display: flex;
				justify-content: space-between;
				margin-bottom: 8rpx;
				text{
					font-weight: bold;
				}
				.button{
					width: 142rpx;
					height: 52rpx;
					background-color: #ffbc09;
					color: #fff;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					border-radius: 26rpx;
					align-items: center;
					font-weight: bold;
					text{
						line-height: 52rpx;
					}
				}
			}
			.quanyi{
				display: flex;
				font-size: 28rpx;
				align-items: baseline;
				.text1{
					color: #AF7107;
				}
				.text2{
					margin-left: 6rpx;
					font-weight: bold;
					margin-right: 6rpx;
				}
				
			}
		}
	
		// 医生会员
		.vip-doc{
			width: 100%;
			height: 150rpx;
			margin-bottom: 24rpx;
			display: flex;
			gap: 20rpx;
			.doc,
			.vip{
				width: 100%;
				height: 150rpx;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 32rpx;
				display: flex;
				image{
					width: 72rpx;
					height: 72rpx;
					margin-right: 20rpx;
				}
				.text{
					display: flex;
					flex-direction: column;
					.title{
						font-weight: bold;
						font-size: 32rpx;
						margin-left: 2rpx;
						margin-bottom: 6rpx;
					}
					.desc{
						color: #898795;
						font-size: 24rpx;
					}
				}
			}
		}
	
		// 好物推荐
		.good-thing{
			width: 100%;
			height: 92rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
			.records-title{
				.title{
					font-size: 32rpx;
				}
			}
			.icon-title{
				display: flex;
				align-items: center;
				gap: 10rpx;
				.arrow-right{
					position: relative;
					top: 2rpx;
				}
			}
		}
	
		// 服务与工具
		.service-tools{
			width: 100%;
			height: 534rpx;
			padding: 20rpx;
			border-radius: 16rpx;
			background-color: #fff;
			margin-bottom: 132rpx;
			.service-grid{
				image{
					width: 56rpx;
					height: 56rpx;
					margin-bottom: 10rpx;
				}
				.grid-text{
					font-size: 28rpx;
					color: #2d3237;
				}
			}
		}
	}
	
</style>
